<div class="IntegrationForm">
    <form nz-form *ngIf="newIntegration && models">
        <nz-form-item>
            <nz-form-label>Model</nz-form-label>
            <nz-form-control>
                <nz-select nzShowSearch name="model" [(ngModel)]="newIntegration.model" (ngModelChange)="updateConfig()">
                    <nz-option *ngFor="let m of models" [nzLabel]="m.name" nzCustomContent [nzValue]="m">
                        <div>{{ m.name }}</div>
                            <ng-container *ngIf="m.storage">
                                <nz-tag nzColor="success">storage</nz-tag>
                            </ng-container>
                            <ng-container *ngIf="m.hook">
                                <nz-tag nzColor="success">hook</nz-tag>
                            </ng-container>
                            <ng-container *ngIf="m.event">
                                <nz-tag nzColor="success">event</nz-tag>
                            </ng-container>
                            <ng-container *ngIf="m.deployment">
                                <nz-tag nzColor="success">deployment</nz-tag>
                            </ng-container>
                    </nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
        <ng-container *ngIf="newIntegration.model">
            <nz-form-item>
                <nz-form-label [nzSpan]="5">Integration name</nz-form-label>
                <nz-form-control>
                    <input nz-input name="name" type="text" [(ngModel)]="newIntegration.name">
                </nz-form-control>
            </nz-form-item>
            <nz-form-item *ngFor="let k of newIntegration.model.default_config | keys">
                <nz-form-label [nzSpan]="5">
                    {{k}}
                    <span *ngIf="newIntegration.config[k].description" nz-tooltip
                          [nzTooltipTitle]="newIntegration.config[k].description" nzTooltipPlacement="right">
                                    <i nz-icon nzType="info-circle" nzTheme="outline"></i>
                    </span>
                </nz-form-label>
                <nz-form-control>
                    <label *ngIf="newIntegration.config[k].type === 'boolean'" nz-checkbox name="{{k}}" [(ngModel)]="newIntegration.config[k].value"></label>
                    <input nz-input type="text" name="{{k}}" [(ngModel)]="newIntegration.config[k].value"  *ngIf="newIntegration.config[k].type === 'string'">
                    <ng-container *ngIf="newIntegration.config[k].type === 'text'">
                        <codemirror [(ngModel)]="newIntegration.config[k].value" [config]="codeMirrorConfig" #codeMirror></codemirror>
                    </ng-container>
                    <input nz-input type="password" name="{{k}}" [(ngModel)]="newIntegration.config[k].value" *ngIf="newIntegration.config[k].type === 'password'">
                </nz-form-control>
            </nz-form-item>

            <nz-form-item nzJustify="end">
                <nz-form-control class="alignRight">
                    <button nz-button nzType="primary" type="button" (click)="create()" [nzLoading]="loading"
                            [disabled]="loading || !newIntegration.name || newIntegration.name === '' || !newIntegration.model">Add</button>

                </nz-form-control>
            </nz-form-item>
        </ng-container>
        <nz-form-item>
        </nz-form-item>
    </form>
</div>
